<template>
    <div>
        <div class="list-item" v-for="(item, index) in ContentList" :key="index">
            <div class="item-name">
            <div class="avatar">
                    <el-avatar :size="40" :src="item.user.avatar" width="40px" height="40px"></el-avatar>
                </div>
                    <div class="name">{{item.user.name}}:</div>
                <div class="subs">{{item.subs}}</div>
                <span  class="CommentIcon" @click="commit(item,index)">
                    <i class="el-icon-chat-round">
                        {{show[index].showComment}}
                    </i>
                </span>
            </div>
                <div v-show='show[index].isShow'>
                    <el-input v-model="show[index].content" placeholder="" ></el-input>
                    <el-button @click="PostChildrenComment(item,index)">评论</el-button>                
                </div>
            <div v-if="item.children" class="children-item" >
                <div v-for="(itemreply, indexreply) in item.children" :key="indexreply" class="">
                <div class="childrenitem">
                    <el-avatar :size="35" :src="itemreply.user.avatar" ></el-avatar>
                    <div  class="name">{{itemreply.user.name}}</div>回复<div class="name">{{item.user.name}}:</div>
                </div>
                    <div class="childrensubs">{{itemreply.subs}}
                        <span  class="CommentIconChildren" @click="commitrelpy(itemreply,index,indexreply)">
                            <i class="el-icon-chat-round"></i>
                            {{show[index].children[indexreply].showComment}}
                        </span>
                    </div>
                    
                    <div  v-show="show[index].children[indexreply].isShow" class="childrenreply">
                        <el-input v-model="show[index].children[indexreply].content" placeholder="" ></el-input>
                        <el-button @click="Reply(itemreply,index,indexreply)">评论</el-button>                    
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>//shit
import { PostComments,GetComments } from "@/service/Api.js";
export default {
    name: "List",
    data(){
         return{
            showComment:'评论',
            replylist:[],
            show:[],
            ContentList:[]
      }
  },
    methods:{

        Reply(itemreply,index,indexreply){
            let param={
                write_id: this.$route.params.id,
                pid: itemreply.id,
                subs : this.show[index].children[indexreply].content
            }
            PostComments(param).then((res)=>{
                console.log(res)
            })

        },
        PostChildrenComment(item,index){
            let params={
                write_id:this.$route.params.id,
                pid:item.id,
                subs : this.show[index].content
            }
            PostComments(params).then((res)=>{
                console.log(res)
            })
            

        },
        commit(item,index){
            if(this.show[index].isShow==false){
                this.show[index].isShow=true
                this.show[index].showComment = '取消评论'                
            }else{
                this.show[index].isShow=false 
                this.show[index].showComment = '评论'               
            }
        },
        commitrelpy(itemreply,index,indexreply){
            if(this.show[index].children[indexreply].isShow==false){
                this.show[index].children[indexreply].isShow=true   
                this.show[index].children[indexreply].showComment = '取消评论'        
            }else{
                this.show[index].children[indexreply].isShow=false   
                this.show[index].children[indexreply].showComment = '评论'                 
            }
        },
        GetComments(){
            GetComments(this.$route.params.id).then((res)=>{
                this.ContentList = res.data.data
                //获取到评论时根据评论结构生成一个对应数组，使原数组的元素和新数组原数组一一对应
                for (let itemindex = 0; itemindex < this.ContentList.length; itemindex++) {   
                    if(this.ContentList[itemindex].children!=''){
                        for(let i=0;i<this.ContentList[itemindex].children.length;i++){
                            let IsShow = { isShow: false ,showComment:'评论',content:''}
                            this.replylist.push(IsShow)
                        }
                        let SetShow = { isShow:false,showComment:'评论',children:this.replylist,content:''}
                        this.show.push(SetShow) 
                        this.replylist=[]
                    }else{
                        let SetShow = { isShow:false,showComment:'评论',content:'',children:[]}
                        this.show.push(SetShow)  
                    }
                }
            })
        }
    },
    created(){
        this.GetComments()
    }
};
</script>
<style scoped>
.childrenreply{
    float: right;
    width: 100%;
}
.childrensubs{
    margin-left:44px;
    width: 94%;

}

.subs{
    width: 75%;
}
.name{
    margin-right:8px ;
    margin-left: 8px;

}
.list-item{
    padding-top:24px;
    width: 90%;
    margin: auto;

}
.item-name{
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;

}
.children-item{
    width: 90%;
    float: right;
    margin-right: 54px;
    border-left: 1px solid red;
    margin-bottom: 16px;

}
.el-button{
    float: right;
    width: 10%;
}
.el-input{
    width: 80%;
}
.CommentIcon{
    float: left;

}
.CommentIconChildren{
    float: right;    
}
.childrenitem{
    display: flex;
    flex-direction: row;
    align-items: center;
    
}


</style>